<template>
  <div class="login">
    <!-- 多学一招：不用手写class
         原因：elementui组件 组件名就是类名 所以可以直接使用
     -->
    <!-- form标签 -->
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="0px"
      class="demo-ruleForm"
    >
      <!-- el-form-item代表一个选项
          label就是当前的标题名
          label-width声明标题名

          vue表单验证规则：
          1.表单数据统一对象管理 2.在el-form , el-input/select/radio等标签统一绑定
          el-form :model="data中的键"  el-input/select/radio v-model="data中的键.键"
          3.设置验证规则    el-form :rules="rules"  rules是模型中的对象 键同-【data中的键.键】键、值=是数组里面是一个个对象设置规则
          4.声明开启表单验证选项  el-form-item prop="同rules中的键"
          ruleForm.键 == v-model="ruleForm.键" == prop="同rules中的键"   键到底写什么 随意 推荐根据接口来


           
     -->
      <el-form-item>
        <h1>B2C电商管理系统</h1>
      </el-form-item>
      <el-form-item prop="question">
        <el-select v-model="ruleForm.question" placeholder="请选择密保问题">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="answer">
        <el-input
          type="text"
          v-model="ruleForm.answer"
          autocomplete="off"
          placeholder="请输入密保答案"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="uname">
        <el-input
          type="password"
          v-model="ruleForm.uname"
          autocomplete="off"
          placeholder="请输入用户名"
          clearable
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="pwd">
        <el-input
          v-model.number="ruleForm.pwd"
          placeholder="密码"
          clearable
          show-password
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item class="picture">
        <el-button
          type="primary"
          class="el-icon-camera"
          @click="smFn"
        ></el-button>
        <el-button
          type="primary"
          class="el-icon-mobile"
          @click="dxtiao"
        ></el-button>
        <el-button type="primary" class="el-icon-files"></el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登陆</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 扫码弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div
        class="qrcode"
        ref="qrCodeUrl"
        style="display:flex;justify-content:center;"
      ></div>
    </el-dialog>
  </div>
</template>
<script>
import { postLoginApi, postshouquan, getquanxian } from "@/api";
import QRCode from "qrcodejs2";

export default {
  data() {
    let checkUname = (rule, value, callback) => {
      //value就是当前用户输入的内容
      //成功了 别弹框 而是callback()
      //失败了  别弹框 而是 callback(new Error("提示信息"))
      //一定要调用上述语法，elementui封装了一套提示信息，不用 就破坏规则
      if (value == "") {
        callback(new Error("用户名不能为空"));
        return;
      }
      if (value.length < 2 || value.length > 12) {
        callback(new Error("长度在2-12个字符"));
        return;
      }
      callback();
    };

    return {
      //控制弹框是否出现,一开始是隐藏的，所以是false
      dialogVisible: false,

      //定义扫码登录变量
      uuidData: "",
      t: null,

      //密保问题
      options: [
        { value: "你的名字", label: "你的名字" },
        { value: "您其中一位老师的名字", label: "您其中一位老师的名字" }
      ],
      //表单数据
      ruleForm: {
        question: "",
        answer: "",
        uname: "",
        pwd: ""
      },

      //留心:除了失去焦点需要验证，提交表单也要验证
      //原因：用户打开之后啥也不操作 直接提交 那么你的验证等于白写
      //思考：如何触发
      //回答：固定语法
      //语法： this.$refs.ref属性值.validate((valid) => {} )
      //说明：valid为真-代表没问题 然后发送请求；为假-不用管

      rules: {
        //键--表单数据的键
        //值-数组 里面是一个个对象
        question: [
          { required: true, message: "请选择密保问题", trigger: "blur" }
        ],
        answer: [
          { required: true, message: "请输入密保答案", trigger: "blur" },
          { min: 2, max: 8, message: "长度在2-8个字符之间", trigger: "blur" }
        ],
        uname: [
          // { required: true, message: "请输入用户名", trigger: "blur" },
          // { min: 2, max: 12, message: "长度在2-12个字符之间", trigger: "blur" }
          { validator: checkUname, trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, max: 12, message: "长度在2-12个字符之间", trigger: "blur" }
        ]
      }
    };
  },
  // mounted () {
  //     this.creatQrCode()
  // },
  methods: {
    //点击扫码图标进行登录---逻辑：1.点击出现弹框  2.同时弹框内创建二维码(整个过程可以百度vue生成二维码)
    //              2.1在整个创建的过程中，有几个注意点，一是放二维码的div放在el-diolog中时，要考虑到生命周期的作用，为获取最新的dom，需要加nextTick
    //                                                 二是需要去清空，否则二维码会累计
    //点击扫码出现弹框
    smFn() {
      this.dialogVisible = true;
      //创建二维码
      this.$nextTick(() => {
        this.creatQrCode();
      });
      // this.creatQrCode()
    },

    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return new Date().getTime() + "-" + uuid;
    },
    //生成二维码
    creatQrCode() {
      // console.log(this.$refs.qrCodeUrl)

      this.uuidData = this.uuid();

      //  清空
      this.$refs.qrCodeUrl.innerHTML = "";
      //  追加
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        // text: 'http://baidu.com',
        text: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed58e834201d0894&redirect_uri=http://kg.zhaodashen.cn/v2/qr/login.php&response_type=code&scope=snsapi_base&state=${this.uuidData}&connect_redirect=1#wechat_redirect`,
        width: 300,
        height: 300,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      //二维码是实时更新的，所以需要我们建个定时器，每次重新生成新的二维码就得清除之前的定时器，开始新的定时器
      if (this.t) clearInterval(this.t);
      this.t = setInterval(() => {
        postshouquan(this.uuidData).then(res => {
          // console.log(res)
          if (res.meta.state == 200) {
            //切记：H5存储用户信息
            localStorage.setItem("uname", res.data.uname);
            localStorage.setItem("roleName", res.data.roleName);
            localStorage.setItem("token", res.data.token);

            //提示登录成功
            this.$message.success(res.meta.msg);
            //跳转之前先清除定时器
            clearInterval(this.t);
            // console.log(1)
            this.$router.push({ path: "/welcome" });
          } else {
            // this.$message.error(res.meta.msg)
          }
        });
      }, 3000);
    },

    //直接点击登录按钮
    submitForm(formName) {
      //语法：1.给标签加ref属性 2.通过this.$refs.ref属性值来获取
      //原理：将监控范围放到剪切到内存中时，带有ref属性的标签会内存中单独放一份

      //这一步是为了进行二次验证，避免直接去点击登录而去发送请求，影响体验度
      this.$refs[formName].validate(valid => {
        if (valid) {
          //后期发送异步请求
          postLoginApi(this.ruleForm).then(res => {
            // console.log(res)
            if (res.meta.state == 200) {
              /*    this.$store.commit('users/setUsersinfo', {
                                       token: res.data.token,
                                       uname: res.data.uname,
                                       roleName: res.data.roleName
                                   }) */
              //切记：H5存储
              localStorage.setItem("uname", res.data.uname);
              localStorage.setItem("roleName", res.data.roleName);
              localStorage.setItem("token", res.data.token);

              this.$message.success("登陆成功");

              //在跳转前请求权限接口，去动态获取左侧菜单栏
              getquanxian().then(res => {
                // console.log(res)
                localStorage.setItem("meuns", JSON.stringify(res.data));

                // //目的：根据用户所属角色的权限来动态添加路由规则
                // this.$router.addRoute("adminindex", { path: "users", component: () => import("../yonghumen/yonghu") })
                //跳转
                this.$router.push({ path: "/welcome" });
              });

              //更新vuex中的数据
              this.$store.commit("users/setUsersinfo", {
                token: res.data.token,
                uname: res.data.uname,
                roleName: res.data.roleName
              });
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        } else {
          //失败不用管，因为elementui有自己的错误提示机制
          console.log("error submit!!");
          return false;
        }
      });
    },

    //点击短信按钮跳转到短信验证页面，具体操作在duanxing页面
    dxtiao() {
      this.$router.push({ path: "/duanxing" });
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  justify-content: center;
  align-content: center;
}
.el-form {
  width: 300px;
  height: 372px;
  .el-form-item__content {
    display: flex;
    width: 20%;
    justify-content: space-between;
  }
}
.el-form h1 {
  text-align: center;
  color: white;
}
.el-select {
  width: 100%;
}
// .el-button {
//     width: 100%;
// }
</style>
